<template>
  <div>
    <el-row>
      <el-col :span="7" style="padding-right:55px;">
        <logo-pic-show :pics="pictures"></logo-pic-show>
      </el-col>
      <el-col :span="12">
        <h5>
          <b>{{spRecord.name}}&nbsp;</b>
        </h5>
        <el-row class="price">
          <el-col :span="12">
            <el-row class="buyrow">
              <el-col :span="6">
                <div class="market">市场价</div>
              </el-col>
              <el-col :span="18">￥{{spRecord.price_market}}&nbsp;&nbsp;</el-col>
            </el-row>
            <el-row class="buyrow">
              <el-col :span="6">成本价</el-col>
              <el-col :span="18" style="color:red;">
                ￥
                <span class="net">{{spRecord.price_sell}}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <my-qrcode :qr-url="spRecord.link_url" :qr-size="70" :qr-text-size="6" qr-text="参考价"></my-qrcode>
          </el-col>
        </el-row>
        <div class="attribute" v-if="spAttribute.attr.length>0">
          <div class="buynum" v-for="(att,i) in spAttribute.attr" :key="att.name">
            选择{{att.name}}：
            <el-radio-group v-model="attr[i]" size="mini" @change="onAttrChange(i)">
              <el-radio-button v-for="(val,j) in att.values" :key="val" :label="val" class="radio"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div>
          <p
            style="color:#888;"
          >库存：{{spRecord.stock}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总销量：{{spRecord.sell_base}}</p>
          <el-input-number
            v-model="buyNumber"
            ref="buynumber"
            controls-position="right"
            style="width:110px;"
            :min="1"
            :max="spRecord.stock"
            :precision="0"
          ></el-input-number>
          <el-button type="danger" :disabled="!isBuy" @click.stop="onAddBuyCar">加入购物车</el-button>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="activesp">------------活动商品------------</div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="main-left">热销商品</div>
      </el-col>
      <el-col :span="20">
        <div class="main-right-title">商品介绍</div>
        <show-html :value="html"></show-html>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getProductEditInfo, //url: '/Product/GetProductEditInfo'- 获取商品编辑信息:基本信息+图标列表
  getProductAttrParamList //url: '/Product/GetProductAttrParamList' - 获取商品属性参数母板及列表
} from "@/api/product";
import {
  addOrderCar //url: '/Order/AddOrderCar' - 添加商品到购物车
} from "@/api/order";
import logoPicShow from "@/components/picture/logoPicsShow"; //src\components\picture\logoPicsShow.vue
import showHtml from "@/components/HtmlEditor/show";
import myQrcode from "@/components/picture/myQrcode"; //二维码生成器
export default {
  components: { logoPicShow, showHtml, myQrcode },
  data() {
    return {
      spId: 0, //商品ID
      spRecord: {}, //商品基本信息
      spAttribute: {
        //商品属性列表{type,attr[],list[]}
        attr: []
      },
      httpHead: "", //网址头
      html: "", //富文本内容
      pictures: [], //商品展示图片列表 {logo: "",pic: "",maxpic: ""}

      attr: [], //当前选中的属性值
      dcChildIndex: 0, //当前选中的属性值的下标
      isBuy: false, //可否购买
      buyNumber: 1, //购买数量

      orderCar: {} //购物车记录 - 加入时赋值
    };
  },
  created() {
    let spId = this.$route.query.id;
    getProductEditInfo({ id: spId }).then(r => {
      if (r.code == 0) {
        this.spRecord = r.data.sp_head; //商品基本信息
        this.html = r.data.sp_html; //富文本内容
        this.httpHead = r.data.http_head; //网址头
        this._SetPics(r.data.sp_showpic_list); //展示图片
        setTimeout(() => {
          this.$refs["buynumber"].focus();
        }, 150);
      }
    });
    getProductAttrParamList({ id: spId }).then(r => {
      if (r.code == 0) {
        this.spAttribute.type = r.data.SpAttrParams.type; //属性类型（个数）
        this.spAttribute.attr = r.data.SpAttrParams.attr; //属性名及其值
        this.spAttribute.list = r.data.param_list; //商品属性参数列表(由此形成的子商品列表)
        if (this.spAttribute.type == 0) {
          this.isBuy = true;
        } else {
          this.isBuy = false;
        }
        for (let i = 0; i < this.spAttribute.type; i++) {
          this.attr.push("");
        }
      } else {
        this.$message.error("获取商品属性出错！原因：" + r.msg);
      }
    });
  },
  methods: {
    //加入购物车
    onAddBuyCar() {
      //购物车记录
      let childID;
      if(this.spAttribute.type==0){
        childID=this.spRecord.param_id;//母板参数ID        
      }else{
        childID=this.spAttribute.list[this.dcChildIndex].ProductParamID; //子产品ID
      }
      let orderCar = {
        OrderCartID: 0, //0表示添加
        CartState: 1, //0删除 1正常 2转为订单
        ProductDataID: this.spRecord.id, //商品ID
        ProductParamID: childID,
        MerchantDataID: this.spRecord.merchant_id, //商家ID
        Number: this.buyNumber //数量
      };
      addOrderCar(orderCar).then(r => {
        $("#ccarvalue").attr("value", this.buyNumber); //找<a>对象单击要用:$()[0].click()
        $("#buyCarCount").click(); //找购物车（div对象）并单击
      });
    },
    //当选择属性时
    onAttrChange() {
      let num = this.spAttribute.type;
      let i = 0;
      let aVal = "";
      for (; i < num; i++) {
        if (this.attr[i] == "") break;
        aVal += this.attr[i] + "-";
      }
      if (i < num) {
        this.isBuy = false;
      } else {
        let st = this._FindStock();
        this.spRecord.stock = st;
        this.isBuy = st > 0 ? true : false;
        if (this.buyNumber > st) this.buyNumber = st;
      }
    },
    //查找子产品库存
    _FindStock() {
      let Src = this.spAttribute.list;
      let find = this.attr;
      for (let i = 0; i < Src.length; i++) {
        let r = true;
        for (let j = 0; j < find.length; j++) {
          r = r && Src[i][`ParamValue${j + 1}`] == find[j];
        }
        if (r) {
          this.dcChildIndex = i;
          return Src[i].Stock;
        }
      }
      return 0;
    },
    //将每个展示图片形成三个地址
    _SetPics(picList) {
      this.pictures = [];
      let id = this.spRecord.id;
      let httph = this.httpHead + "/" + id.toString();
      picList.forEach(pic => {
        //{logo: "",pic: "",maxpic: ""}
        this.pictures.push({
          logo: httph + "/5/" + pic, //50
          pic: httph + "/2/" + pic, //850 - 这里直接上大图
          maxpic: httph + "/3/" + pic //350 - 没生效
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.radio {
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.activesp {
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
}
.price,
.attribute,
.num-buy {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.attribute .buynum {
  color: #888;
  margin: 10px 0;
}
.price {
  margin-top: 10px;
  color: #888;
  .buyrow {
    line-height: 30px;
    // margin:10px 0 10px 0;
    .net {
      font-size: 25px;
    }
  }
}
.main-left,
.main-right-title {
  margin-top: 20px;
  padding-left: 10px;
  line-height: 26px;
  font-weight: 800;
  font-size: 14px;
  background-color: #eee;
}
.main-left .leir {
  border: 1px solid #888;
}
</style>